<div class="{{ prefixCls }}-footer {{ isRange ? prefixCls + '-range-bottom' : '' }} {{ hasTimePicker ? prefixCls + '-footer-show-ok' : '' }}">
  <div *ngIf="rangeQuickSelector" class="{{ prefixCls }}-footer-extra {{ prefixCls }}-range-quick-selector">
    <ng-container *ngTemplateOutlet="rangeQuickSelector"></ng-container>
  </div>
  <div *ngIf="extraFooter" class="{{ prefixCls }}-footer-extra {{ isRange ? prefixCls + '-range-quick-selector' : '' }}">
    <ng-container [ngSwitch]="true">
      <ng-container *ngSwitchCase="isTemplateRef(extraFooter)">
        <ng-container *ngTemplateOutlet="extraFooter"></ng-container>
      </ng-container>
      <ng-container *ngSwitchCase="isNonEmptyString(extraFooter)">
        <span [innerHTML]="extraFooter"></span>
      </ng-container>
    </ng-container>
  </div>
  <span *ngIf="showToday || hasTimePicker" class="{{ prefixCls }}-footer-btn">
    <today-button
      *ngIf="showToday"
      [locale]="locale"
      [disabledDate]="disabledDate"
      [hasTimePicker]="hasTimePicker"
      (clickToday)="clickToday.emit($event)"
    ></today-button>
    <time-picker-button
      *ngIf="hasTimePicker"
      [locale]="locale"
      [timePickerDisabled]="timePickerDisabled"
      [showTimePicker]="showTimePicker"
      (showTimePickerChange)="showTimePickerChange.emit($event)"
    ></time-picker-button>
    <ok-button
      *ngIf="hasTimePicker"
      [okDisabled]="okDisabled"
      [locale]="locale"
      (clickOk)="clickOk.emit()"
    ></ok-button>
  </span>
</div>